<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      width="500px">
      <el-tree
        :data="deptOptions"
        :props="defaultProps"
        show-checkbox
        :expand-on-click-node="true"
        :filter-node-method="filterNode"
        ref="tree"
        check-on-click-node
        default-expand-all
        @check-change="handleCheckChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  size="mini" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  export default {
    props: ['chooseDepartmenData'],
    name: "Role",
    data() {
      return {
        title:'选择部门',
        loading:false,
        dialogTableVisible:true,
        //产品查询数据
        queryParams:{
          code:'',
          name:'',
        },
        newxuanz:'',//当前选中的
        deptOptions:[],//树形图数据
        defaultProps: {
          children: "children",
          label: "label"
        },


      };
    },
    components:{

    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      console.log('接受',this.chooseDepartmenData)
      this.getTreeselect();//树形图查询
      this.title = this.chooseDepartmenData.title
    },
    methods: {
      //确定
      determine:function(){

        this.$emit('chooseDepartmen',this.newxuanz)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        this.determine()

      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleCheckChange(data, checked, indeterminate) {
        var rad=''
        var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
        var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
        ridsb.forEach(ids=>{//获取选中的所有的父级id
          rad+=','+ids.id
        })
        rad=rad.substr(1) // 删除字符串前面的','
        var rids=rad+','+ridsa
        var arr=rids.split(',')//  把字符串转换成数组
        arr=[...new Set(arr)]; // 数组去重
        rids=arr.join(',')// 把数组转换成字符串
        this.newxuanz = rids
        console.log(this.newxuanz )
      },


    }
  };
</script>
<style >





</style>
